@import "../styles/_variables";
@import "../../assets/iconfont/_iconfont";

$default-border-color: #d9d9d9;
$border-style: 1px solid #33b5e5;
$border-color: #33b5e5;
$tab-active-color: #3a3a3a;
$remove-btn-size: 12px;

// tab选项两边留白
@mixin btn-ctrl-size($size:29px) {
	width: $size;
	height: $size;
	line-height: $size;
}
@mixin padding-blank($size:20px) {
	padding-left: $size;
	padding-right: $size;
}

// tab样式
cc-tabset {
	display: block;
	overflow: hidden;

	// .tabset-nav.tabset-smaller ~ .tabset-dir-ctrl .dir-ctrl {
	// 	@include btn-ctrl-size(25px);
	// }
	.tabset-header {
		position: relative;
		margin-bottom: 30px;
		overflow: hidden;

		&:before {
			position: absolute;
			content: "";
			width: 100%;
			bottom: 0;
			border-bottom: $border-style;
		}

		// .tabset-btn-ctrl {
		// 	display: none;
		// 	position: absolute;
		// 	right: 0;
		// 	top: 0;
		// 	background-color: #fff;
		// 	z-index: 7;

		// 	&.active {
		// 		display: block;
		// 	}

		// 	.btn-ctrl {
		// 		@include btn-ctrl-size;
		// 		display: inline-block;
		// 		margin-right: 1px;
		// 		text-align: center;
		// 		vertical-align: top;
		// 		cursor: pointer;
		// 		color: #666;

		// 		&:hover {
		// 			background-color: #f6f6f6;
		// 		}

		// 		&:last-of-type {
		// 			margin-right: 0;
		// 		}

		// 		&.btn-back {
		// 			@extend .iconfont;
		// 		  	@extend .icon-rightarrow;
		// 		  	transform: rotate(180deg);
		// 		}

		// 		&.btn-forward {
		// 			@extend .iconfont;
		// 			@extend .icon-rightarrow;
		// 		}
		// 	}

		// 	&.not-forward .btn-forward,
		// 	&.not-back .btn-back {
		// 		color: #eee;
		// 		&:hover {
		// 			background-color: #fff;
		// 		}
		// 	}
		// }
	}

	.tabset-nav {
		display: inline-block;
		margin-top: 0;
		padding-left: 0;
		transition: .7s;
		font-family: $font-string;
		white-space: nowrap;

		& > * {
			box-sizing: border-box;
		}

		&::last-of-type {
			margin-right: 0;
		}

		& > cc-tab {
			display: inline-block;
			padding-right: 5px;

			a {
				display: block;
				@include padding-blank;
			}

			& > div {
				position: relative;
				display: inline-block;
				line-height: 28px;
				font-size: $font-size-text;
				border: 1px solid $default-border-color;
				border-bottom-color: $border-color;
				background-color: #f4f4f4;
				color: #145681;
				text-align: center;
				cursor: pointer;

				&.active {
					border-color: $border-color;
					border-bottom-color: #fcfcfc;
					background-color: #fcfcfc;
					color: $tab-active-color;
					cursor: text;
					z-index: 6;
				}

				&.disabled {
					cursor: not-allowed;
					color: $color-disabled;
				}

				&:not(.active):not(.disabled):hover {
					background-color: #fff;
					color: $tab-active-color;
				}
			}

			.btn-remove {
				display: none;
				position: absolute;
				top: 1px;
				right: 1px;
				width: $remove-btn-size;
				height: $remove-btn-size;
				border-radius: 50%;
				background-color: #d7d8d7;
				cursor: pointer;

				&:hover {
					background-color: #cdcfcf;
				}

				&::before,
				&::after {
					position: absolute;
					top: 50%;
					left: 50%;
					margin-top: -4px;
					content: "";
					width: 1px;
					height: 8px;
					background-color: #f9fafa;
				}

				&::before {
					transform: rotate(-45deg);
				}

				&::after {
					transform: rotate(45deg);
				}
			}
		}

		&.remove {
			a:hover .btn-remove {
				display: block;
			}
		}

		&.justified {
			width: 100%;

			& > li {
				display: table-cell;
				width: 1%;
			}
		}

		&.tabset-smaller {
			cc-tab > div {
				line-height: 24px;
			}

			a {
				@include padding-blank(14px);
			}
		}
	}
}
